<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="550" height="550"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = 'italic 24px "Times New Roman"';

        // --- Helper function to draw an arrow ---
        function drawArrow(fromx, fromy, tox, toy) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }
        
        // --- Main Drawing ---
        ctx.beginPath();

        // Circuit dimensions
        const cx = 275;
        const cy = 275;
        const side = 320;
        const halfSide = side / 2;

        const x1 = cx - halfSide; // left
        const x2 = cx + halfSide; // right
        const y1 = cy - halfSide; // top
        const y2 = cy + halfSide; // bottom

        // 1. Draw the main square loop with gaps for components
        
        // Top wire (with gap for source)
        const sourceGap = 20;
        ctx.moveTo(x1, y1);
        ctx.lineTo(cx - sourceGap, y1);
        ctx.moveTo(cx + sourceGap, y1);
        ctx.lineTo(x2, y1);

        // Right wire (with gap for resistor)
        const resistorGap = 40;
        ctx.moveTo(x2, y1);
        ctx.lineTo(x2, cy - resistorGap);
        ctx.moveTo(x2, cy + resistorGap);
        ctx.lineTo(x2, y2);
        
        // Bottom wire
        ctx.moveTo(x2, y2);
        ctx.lineTo(x1, y2);

        // Left wire (with gap for solenoid structure)
        const solenoidGap = 40;
        ctx.moveTo(x1, y2);
        ctx.lineTo(x1, cy + solenoidGap);
        ctx.moveTo(x1, cy - solenoidGap);
        ctx.lineTo(x1, y1);

        ctx.stroke();


        // 2. Draw Components
        
        // Voltage Source E(t)
        ctx.beginPath();
        const vSourceX = cx;
        const vSourceY = y1;
        const longLine = 20;
        const shortLine = 12;
        ctx.moveTo(vSourceX - sourceGap, vSourceY - shortLine);
        ctx.lineTo(vSourceX - sourceGap, vSourceY + shortLine);
        ctx.moveTo(vSourceX + sourceGap, vSourceY - longLine);
        ctx.lineTo(vSourceX + sourceGap, vSourceY + longLine);
        ctx.stroke();
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('\u2130(t)', cx, y1 - 20);

        // Resistor R
        ctx.beginPath();
        const resX = x2;
        const resTopY = cy - resistorGap;
        const resBottomY = cy + resistorGap;
        const zigWidth = 10;
        const numZigs = 7;
        const zigHeight = (resBottomY - resTopY) / numZigs;
        ctx.moveTo(resX, resTopY);
        for (let i = 0; i < numZigs; i++) {
            ctx.lineTo(resX + (i % 2 === 0 ? -1 : 1) * zigWidth, resTopY + (i + 0.5) * zigHeight);
        }
        ctx.lineTo(resX, resBottomY);
        ctx.stroke();
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.font = '24px "Times New Roman"'; // Non-italic for R
        ctx.fillText('R', x2 + 25, cy);
        ctx.font = 'italic 24px "Times New Roman"'; // Back to italic


        // Solenoid (Inductor)
        const solX = x1;
        const solTopY = cy - solenoidGap;
        const solBottomY = cy + solenoidGap;
        const prongLen = 40;
        const coilWidth = 80;
        const coilRx = coilWidth / 2;
        const coilRy = 10;
        const nTurns = 5;
        const coilCenterY = cy;
        const coilCenterX = solX + prongLen + coilRx;

        // Connecting wires to solenoid
        ctx.beginPath();
        ctx.moveTo(solX, solTopY);
        ctx.lineTo(solX + prongLen, solTopY);
        ctx.moveTo(solX, solBottomY);
        ctx.lineTo(solX + prongLen, solBottomY);

        // Vertical bar behind coil
        ctx.moveTo(solX + prongLen, solTopY);
        ctx.lineTo(solX + prongLen, solBottomY);
        ctx.stroke();

        // Coil turns (ellipses)
        const turnSpacing = (solBottomY - solTopY) / (nTurns -1);
        for (let i = 0; i < nTurns; i++) {
            ctx.beginPath();
            let turnY = solTopY + i * turnSpacing;
            ctx.ellipse(coilCenterX, turnY, coilRx, coilRy, 0, 0, 2 * Math.PI);
            ctx.stroke();
        }

        // 3. Draw Labels and Arrows

        // Dimension lines for l
        ctx.beginPath();
        const dimOffset = 40;
        // Vertical 'l'
        ctx.moveTo(x1 - dimOffset, y1);
        ctx.lineTo(x1 - dimOffset, y2);
        ctx.moveTo(x1 - dimOffset - 5, y1);
        ctx.lineTo(x1 - dimOffset + 5, y1);
        ctx.moveTo(x1 - dimOffset - 5, y2);
        ctx.lineTo(x1 - dimOffset + 5, y2);
        // Horizontal 'l'
        ctx.moveTo(x1, y2 + dimOffset);
        ctx.lineTo(x2, y2 + dimOffset);
        ctx.moveTo(x1, y2 + dimOffset - 5);
        ctx.lineTo(x1, y2 + dimOffset + 5);
        ctx.moveTo(x2, y2 + dimOffset - 5);
        ctx.lineTo(x2, y2 + dimOffset + 5);
        ctx.stroke();
        
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('\u2113', x1 - dimOffset - 20, cy);
        ctx.fillText('\u2113', cx, y2 + dimOffset + 20);

        // Current 'I' arrows
        ctx.font = 'italic 24px "Times New Roman"';
        // Arrow by resistor
        ctx.beginPath();
        drawArrow(x2, cy + 60, x2, cy + 90);
        ctx.stroke();
        ctx.textAlign = 'right';
        ctx.fillText('I', x2 - 15, cy + 75);

        // Arrow by solenoid
        ctx.beginPath();
        const arcR = 20;
        const arcRy = 8;
        ctx.ellipse(coilCenterX, solBottomY, arcR, arcRy, 0, Math.PI * 0.9, Math.PI * 1.8);
        // Arrow head for arc
        const angle = Math.PI * 1.8;
        const headlen = 10;
        const ax = coilCenterX + arcR * Math.cos(angle);
        const ay = solBottomY + arcRy * Math.sin(angle);
        ctx.moveTo(ax, ay);
        ctx.lineTo(ax - headlen * Math.cos(angle - Math.PI / 6 + Math.PI/2), ay - headlen * Math.sin(angle - Math.PI / 6 + Math.PI/2));
        ctx.moveTo(ax, ay);
        ctx.lineTo(ax - headlen * Math.cos(angle + Math.PI / 6 + Math.PI/2), ay - headlen * Math.sin(angle + Math.PI / 6 + Math.PI/2));

        ctx.stroke();
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('I', coilCenterX, solBottomY + 15);

    </script>
</body>
</html>